<template>
    <div id="aCoursesList" class="bg-fa of">

        <!-- 阿里云视频播放器样式 -->
        <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.1/skins/default/aliplayer-min.css" >
        <!-- 阿里云视频播放器脚本 -->
        <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.1/aliplayer-min.js" />


        <!-- 定义播放器dom -->
        <div>
            <div id="J_prismPlayer" class="prism-player" style="margin-left:70px; float:left;"/>

            <div style="float:none; margin-rightright:70px; height:400px;">

                <!-- /课程介绍 -->
                <div class="mt50 height:50px;">
                    <h6 class="c-g-content c-infor-title">
                    <span>课程大纲</span>
                    </h6>

                    <section class="mt20">
                        <div class="lh-menu-wrap">
                            <menu id="lh-menu" class="lh-menu mt10 mr10">
                                <ul class="infinite-list"  style="overflow:auto;height:350px;">

                                    <li class="lh-menu-stair" v-for="chapter in chapterVideoList" :key="chapter.id">
                                        <a href="javascript: void(0)" :title="chapter.id" class="current-1">
                                            <em class="lh-menu-i-1 icon18 mr10"></em>{{chapter.title}}
                                        </a>

                                        <ol class="lh-menu-ol" style="display: block;">
                                            <li class="lh-menu-second ml30" v-for="video in  chapter.eduVideoList" :key="video.id">
                                                <a @click.prevent="toVideo(video.videoSourceId,(isBuy || Number(video.isFree)===0))" >
                                                <span class="fr">
                                                    <i class="free-icon vam mr10" v-if="isBuy==false && Number(video.isFree)===0">免费试听</i>
                                                </span>
                                                <em class="lh-menu-i-2 icon16 mr5">&nbsp;</em>{{video.title}}
                                                </a>
                                            </li>
                                        </ol>
                                    </li>
                                </ul>
                            </menu>
                        </div>
                    </section>
                </div>
                <!-- /课程大纲 -->
            </div>
        </div>

        <div style="width:1000px;height:100px;margin-top:50px;">
            <div style="float:left;margin-left:200px;margin-right:20px;">
                <img :src="url" style="height: 60px;border-radius: 50%;"/>
            </div>
            <div style="padding-top:10px;float:none;">
                <el-input type="textarea" id="content" v-model="comment.content" style="width:500px;height:50px;"></el-input>
                <el-button type="primary" @click="onSubmit" style="height:50px;">评论</el-button>
            </div>
        </div>

        <div style=" width:1000px;margin-left:70px; height:500px;">
            <div v-for="comment in commentList" :key="comment.id" style="margin-bottom:20px;">
                <img :src="comment.avatar" style="height: 40px;border-radius: 50%; float:left;margin-right:20px;"/>
                <div style="padding-left:50px;">
                    <div  class="username">{{comment.nickname}}</div>
                    <span class="message">{{comment.content}}</span>
                </div>
                <hr>
            </div>
        </div>

        
    </div>

</template>

<script>
import vod from '@/api/vod'
import comment from '@/api/comment';
import orders from '@/api/orders';

export default {
    layout: 'video',//应用video布局
    data(){
        return{
            url:'http://up.enterdesk.com/edpic/de/67/ac/de67acb91e02a3121e3974c0177f8bf2.jpg',
            chapterVideoList:[],
            courseId:'',
            commentList:[],
            comment:{
                content:'',
                courseId:''
            },
            isBuy:false,
        }
    },
    asyncData({ params, error }) {
       return vod.getPlayAuth(params.vid)
        .then(response => {
            return { 
                playAuth: response.data.playAuth,
                vid: params.vid
            }
        })
    },
    mounted() { //页面渲染之后  执行
        console.log(" ========== ",this.vid,this.playAuth)
        this.getPlayAuth();
    },
    methods:{
        getIsBuy(){
            
            orders.isBuy(this.courseId).then(response=>{
                this.isBuy = response.data.isBuy;
                console.log(" isBuy == ",this.isBuy);
            })
        },
        // 播放课程视频
        toVideo(videoSourceId,isFree){
            console.log("播放视频",videoSourceId)
            if(isFree==true){
                this.$router.push({path:'/player/'+videoSourceId+'?courseId='+this.courseId})
            }else{
                this.$confirm('该课程收费，需要购买，是否前往下单', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.buy();
                }).catch(() => {});
            }
        },
        //发表评论
        onSubmit(){
            comment.addComment(this.comment).then(response=>{
                this.$message({
                    message: "评论成功",
                    type: 'success',
                })
                //清空数据
                this.comment.content = '';
                this.getCommentList();
                
            })
        },
        //获取课程评论
        getCommentList(){
            comment.getCourseComment(this.courseId).then(response=>{
                this.commentList = response.data.commentList;
            })
        },
        getPlayAuth(){
            var player = new Aliplayer({
            id: 'J_prismPlayer',
            vid: this.vid, // 视频id
            playauth: this.playAuth, // 播放凭证
            encryptType: '1', // 如果播放加密视频，则需设置encryptType=1，非加密视频无需设置此项
            width: '1000px',
            height: '400px',
            // 以下可选设置
            cover: 'http://guli.shop/photo/banner/1525939573202.jpg', // 封面
            qualitySort: 'asc', // 清晰度排序

            mediaType: 'video', // 返回音频还是视频
            autoplay: false, // 自动播放
            isLive: false, // 直播
            rePlay: false, // 循环播放
            preload: true, //播放器自动加载
            controlBarVisibility: 'hover', // 控制面板的实现 ‘click’ 点击出现、‘hover’ 浮动出现、‘always’ 一直在
            useH5Prism: true, // 播放器类型：html5

            playsinline:true,//H5是否内置播放
            snapshot:true,//falsh启用截图

        }, function(player) {
            console.log('播放器创建成功')
        })
        }
    },
    created(){

        //获取课程大纲
        this.courseId = this.$route.query.courseId;



        if(this.courseId){

            //获取用户是否购买 了该课程
            this.getIsBuy();

            //获取视频课程小节
            this.comment.courseId = this.courseId;
            vod.findDescription(this.courseId).then(response=>{
                this.chapterVideoList = response.data.data;
            })

            //加载评论
            this.getCommentList();
        }


    }

}
</script>

<style scoped>

span{word-break:normal; width:auto; display:block; white-space:pre-wrap;word-wrap : break-word ;overflow: hidden ;}  
.username{
    font-size: 16px;
    font-weight: bold;
    margin-left:10px;
    line-height:30px;
}
.message{
    width: 80%;
    font-size: 12px;
    margin-left:10px;
    line-height:20px;
}
</style>